<template>
  <formItem label="项目" @click.native="handleShowPop">
    <div class="form-select">
      <span class="form-text" v-show="selectValue != ''">{{ selectValue }}</span>
      <span class="form-text-placeholder" v-show="selectValue == ''">{{ placeholder }}</span>
      <span class="font_family icon-gengduo form-arrow"></span>
    </div>
    <van-popup position="bottom" get-container="body" v-model="showPop">
      <div class="header-btn">
        <div class="btn-cancle" @click="popCancle">取消</div>
        <div class="btn-confirm" @click="onConfirm">确定</div>
      </div>
      <van-search v-model="query.search" @search="onSearch" placeholder="请输入搜索关键词" />
      <div class="project-list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
          <div class="item" :class="checkIndex === index ? 'active' : ''" @click="checkIndex = index" v-for="(item, index) in dataList" :key="index">
            {{ item.value }}
          </div>
        </van-list>
      </div>
    </van-popup>
  </formItem>
</template>
<script>
import formItem from '@/components/form-item'
import {
  getReportProject
} from '@/api/ol'
import { Toast } from 'vant'

export default {
  components: {
    formItem
  },
  props: {
    placeholder: {
      type: String,
      default: '请选择',
    }
  },
  data() {
    return {
      selectValue: '',
      showPop: false,
      loading: false, // 加载更多相关
      finished: false, // 加载更多相关
      dataList: [],
      checkIndex: '',
      query: {
        search: '',
        page: 1
      },
    }
  },
  watch: {
    // value(newVal) {
    //   // 赋值判断
    //   this.selectValue = newVal
    // },
    // selectValue(newVal) {
    //   this.$emit('input', newVal)
    // }
  },
  methods: {
    popCancle() {
      this.showPop = false
    },
    handleShowPop() {
      this.showPop = true
    },
    onConfirm() {
      if (this.checkIndex !== '') {
        this.selectValue = this.dataList[this.checkIndex].value
        this.$emit('setProject', this.dataList[this.checkIndex])
        this.showPop = false
      } else {
        Toast('没有选中项目')
      }
    },
    getReportProject() {
      getReportProject(this.query)
        .then(res => {
          if (res.data.length === 0 || res.data.length < 30) {
            this.finished = true
          }

          this.dataList = this.dataList.concat(res.data)
          this.loading = false
        })
    },
    // 加载更多
    onLoad() {
      this.query.page = this.query.page + 1
      this.getReportProject()
    },
    onSearch(value) {
      this.dataList = []
      this.query.page = 1
      this.query.search = value
      this.getReportProject()
    },
  },
  mounted() {
    this.getReportProject()
  }
}
</script>
<style lang="less" scoped>
.form-select {
  text-align: right;
  line-height: 36px;
}
.form-text-placeholder {
  font-size: 14px;
  color: #011445;
  opacity: 0.6;
}
.form-text {
    display: inline-block;
    width: 150px;
    font-size: 14px;
    color: #011445;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.form-arrow {
  display: inline-block;
  font-weight: normal;
  transform: rotate(90deg);
  margin-left: 10px;
}
.header-btn {
  height: 44px;
  display: flex;
  justify-content: space-between;
  .btn-cancle, .btn-confirm {
    color: #333;
    font-size: 14px;
    line-height: 44px;
    padding: 0 20px;
  }
  .btn-cancle {
    
    color: #969799;
  }
}
.project-list {
  height: 380px;
  overflow: auto;
  .item {
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    // border-bottom: 1px solid #cecece;
    &.active {
      background: #CBEADF;
      color: #009966;
    }
  }
}
</style>